<template>
	<view class="download-register">
		<view class="download-register-content">
			<image src="/static/images/logo.png" class="logo" mode=""></image>
			<image src="/static/images/logo-text-fsm.png" class="logo-text" mode="widthFix"></image>
			<view class="phone">
				<input type="number" pattern="\d*" maxlength="11"  placeholder="请输入手机号" placeholder-style="color:#999999;font-size:28rpx;" v-model="phoneNumber" class="reg-ipt" />
			</view>
			<view class="sms-code">
				<input type="number" placeholder="请输入验证码" v-model="sms_code" class="reg-ipt sms-ipt" placeholder-style="color:#999999;font-size:28rpx;" />
				<view class="get-sme-code" @click="getVerifyCode()">{{ showCount == false?'获取验证码':countTime + '秒后重试'}}</view>
			</view>
			<view class="passWord">
				<input type="password" placeholder="请输入至少6位的密码" v-model="password" class="reg-ipt" />
			</view>
			<view class="invitCode">
				<input type="text" v-if="invite_code" v-model="invite_code" :disabled="disabled" class="reg-ipt" />
				<input type="text" placeholder="请输入您的邀请码" v-else v-model="invite_code" class="reg-ipt" />
			</view>
			<view class="agreement">
				<view class="checkbox" @click="handleClick">
					<view class="choiced-box" v-if="agreement">
						<image src="/static/images/download-choiced.png" mode=""></image>
					</view>
					<view class="show-box" v-else></view>
					<view>我已阅读并同意</view>
				</view>
				<view class="agreement-text">
					<text class="reg-agreement">
						<a href="https://www.littleshop.shop/wap/configs/user/agreement">《注册协议》</a>
					</text>
					<span>和</span>
					<text class="privacy-agreement">
						<a href="https://www.littleshop.shop/wap/configs/user/privacy">《隐私协议》</a>
					</text>
				</view>
			</view>
			
			<view class="bottom">
				<view class="circle4"></view>
				<view class="register" @click="registeNow()">立即注册</view>
				<view class="downLoad" @click="open" >立即下载</view>
			</view>
			
			<view class="browser-pop" v-if="popshow" @click="hide()">
				<img src="img/openguide.png" class="openguide" mode="">
			</view>

		</view>
	</view>
</template>

<script>
	/* var lastTouchEnd = 0;
	document.documentElement.addEventListener('touchend', function (event) {undefined
		var now = Date.now();
		if (now - lastTouchEnd <= 300) {undefined
			event.preventDefault();
		}
		lastTouchEnd = now;
	}, false);
	
	function getRequestParams() {
			let url = location.href;
			let requestParams = {};
			if (url.indexOf('?') !== -1) {
				let str = url.substr(url.indexOf('?') + 1);
				let strs = str.split('&');
				for (let i = 0; i < strs.length; i++) {
					requestParams[strs[i].split('=')[0]] = decodeURI(strs[i].split('=')[1]);
				}
			}
			return requestParams;
	}
	let params = getRequestParams();
	
	let url_invite_code = params['invite_code'];
	let disabled = false;
	if(url_invite_code!=undefined){
		disabled = true
	} */
	import { registerByApp,sendingSmsCode } from 'api/authApi.js'
	export default {
		data:()=> ({
			popshow: false,
			phoneNumber: '',
			password: null,
			invite_code:url_invite_code,
			countTime: null,
			showCount: false,
			msg: '',
			showToast: false,
			sms_key: '',
			sms_code: '',
			password: '',
			agreement: true,
			confirmShow:true,
			disabled:disabled
		}),
		methods: {
			isWeiXinLogin() {
				var ua = window.navigator.userAgent.toLowerCase();
				if (ua.match(/MicroMessenger/i) == 'micromessenger') {
					return true;
				} else {
					return false;
				}
			},
			open() {
				if (this.isWeiXinLogin()) {
					this.popshow = true;
				} else {
					this.popshow = false;
					var u = navigator.userAgent;
					var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
					var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
					if (isiOS) {
						window.location.href = 'https://apps.apple.com/us/app/%E6%9C%89%E7%82%B9%E4%B8%9C%E8%A5%BF%E4%BC%9A%E5%91%98%E5%BA%97/id1619662735'
					} else if (isAndroid) {
						window.location.href = 'https://littleshop.oss-cn-beijing.aliyuncs.com/apps/app-release-100.apk';
					}
				}
			},
			hide(){
				this.popshow = false;
			},
			isPhoneAvailable(str) {
				let myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
				if (!myreg.test(str)) {
					return false;
				} else {
					return true;
				}
			},
			getVerifyCode() {
				if (this.showCount) { return }
				let custom_phone = this.phoneNumber;
				let time = 60;
				let isPhone = this.isPhoneAvailable(custom_phone)
				if (custom_phone == '') {
					uni.showToast({
						icon:'none',
						title:'请输入手机号'
					})
				} else {
					if (isPhone) {
						let params = {
							phone: this.phoneNumber,
							type: 'register_account'
						}
						sendingSmsCode(params).then(res=>{
							this.sms_key = res.key;
							this.showCount = true;
							this.countTime = time;
							this.setCountTime(time)
						})
					} else {
						uni.showToast({
							icon:'none',
							title:'请输入正确的手机号'
						})
					}
				}
			},
			setCountTime(time) {
				let count = setInterval(() => {
					time = time - 1
					this.countTime = time
					if (this.countTime == 0) {
						this.showCount = false
						this.countTime = null
						clearInterval(count)
					}
				}, 1000)
			},
			handleClick() {
				this.agreement = !this.agreement
			},
			registeApi(params) {
				return service({
					url: 'users',
					method: 'post',
					data: JSON.stringify(params)
				})
			},
			registeNow() {
				if (this.phoneNumber == '') {
					uni.showToast({
						icon:'none',
						title:'请输入手机号'
					})
				} else if (this.sms_code == '') {
					uni.showToast({
						icon:'none',
						title:'请输入验证码'
					})
				} else if (this.password == '') {
					uni.showToast({
						icon:'none',
						title:'请输入密码'
					})
				} else if (!this.agreement) {
					uni.showToast({
						icon:'none',
						title:'请阅读注册协议及隐私协议并同意！'
					})
				}else if (this.invite_code == undefined) {
					uni.showModal({
						cancelText:'填写邀请码',
						cancelColor:'#666666',
						confirmText:'直接注册',
						confirmColor:'#FF6000',
						title:'提示',
						content:'如您有推荐人请填写邀请码，如您没有推荐人可直接注册',
						success:(res)=> {
								if (res.confirm) {
									let params = {
										phone: this.phoneNumber,
										sms_key: this.sms_key,
										sms_code: this.sms_code,
										password: this.password,
										invite_code: this.invite_code,
										agreement: 1
									}
									registerByApp(params).then(res=>{
										uni.showToast({
											icon:'none',
											title:'注册成功！'
										})
									})
								}
						}
					})
				}else {
					let params = {
						phone: this.phoneNumber,
						sms_key: this.sms_key,
						sms_code: this.sms_code,
						password: this.password,
						invite_code: this.invite_code,
						agreement: 1
					}
					registerByApp(params).then(res=>{
						uni.showToast({
							icon:'none',
							title:'注册成功！'
						})
					})
				}
			},
			confirm(){
				let params = {
					phone: this.phoneNumber,
					sms_key: this.sms_key,
					sms_code: this.sms_code,
					password: this.password,
					invite_code: this.invite_code,
					agreement: 1
				}
				this.registeApi(params).then(res => {
					this.showToast = true
					this.msg = '注册成功！'
					setTimeout(() => {
						this.showToast = false
					}, 1000)
					this.confirmShow = false
				})
			},
			cancle(){
				this.confirmShow = false
			}
		}
	}
</script>

<style scoped lang="scss">
	.download-register-content{
		padding-top: 70rpx;
	}
	.logo{
		display: block;
		width: 150rpx;
		height: 150rpx;
		border-radius: 20rpx;
		margin: 0 auto;
	}
	.logo-text{
		display: block;
		width: 150rpx;
		margin: 20rpx auto;
	}
	.phone,.sms-code,.passWord,.invitCode{
		width: 580rpx;
		height: 75rpx;
		background: #FFFFFF;
		border-radius: 44rpx;
		border: 2rpx solid #979797;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 30rpx auto 20rpx;
	}
	.phone{
		margin-top: 50rpx;
	}
	.reg-ipt{
		width: 500rpx;
		margin-left: 32rpx;
		font-size: 28rpx;
		color:#333333;
	}
	.sms-ipt{
		width: 350rpx;
	}
	.get-sme-code{
		width: 208rpx;
		height: 75rpx;
		background: #333333;
		border-radius: 40rpx;
		border: 2rpx solid #555555;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-weight: 400;
		color: #FFFFFF;
	}
	.agreement-text{
		display: flex;
		a{
			text-decoration: none;
			color: #FB0016;
		}
	}
	.agreement{
		display: flex;
		justify-content: center;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
		margin-top: 30rpx;
	}
	.checkbox{
		display: flex;
		align-items: center;
		.choiced-box{
			width: 32rpx;
			height: 32rpx;
			border-radius: 4rpx;
			margin-right: 15rpx;
			background: #333333;
			display: flex;
			align-items: center;
			justify-content: center;
			>image{
				display: block;
				width:28rpx;
				height:28rpx;
			}
		}
		.show-box{
			width: 28rpx;
			height: 28rpx;
			border-radius: 4rpx;
			border: 2rpx solid #333333;
			margin-right: 15rpx;
		}
	}
	.bottom{
		width: 750rpx;
		height: 340rpx;
		background: #FFE066;
		position:fixed;
		bottom: 0;
		left: 0;
		overflow: hidden;
		.circle4{
			width: 100%;
			height:70rpx;
			border-radius: 0 0 50% 50%/0 0 100% 100%;
			background: #FFFFFF;
			position: absolute;
		}
		.register{
			width: 580rpx;
			height: 88rpx;
			background: #333333;
			border-radius: 44rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			font-weight: 500;
			color: #FFFFFF;
			position: absolute;
			left:50%;
			top:15rpx;
			margin-left: -290rpx;
		}
		.downLoad{
			width: 580rpx;
			height: 88rpx;
			background: url(../../../static/images/btnbg.png) no-repeat center;
			 background-size: cover;
			border-radius: 44rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			font-weight: 500;
			color: #FFFFFF;
			position: absolute;
			left:50%;
			top:130rpx;
			margin-left: -290rpx;
		}
	}
</style>
